<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引⼊ layui.css -->
    <link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">
    <style>
        /* 全局样式 */
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        button {
            cursor: pointer;
        }

        input[type=checkbox] {
            cursor: pointer;
        }
        th{
            padding: 15px 0;
        }
        /* 提示 */
        .Tips {
            position: fixed;
            top: calc(14%);
            left: calc(50%);
            transform: translate(-50%, -50%);
            padding: 10px;
            border-radius: 15px;
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            display: none;
            text-align: center;
            z-index: 10000000000000;
        }

        /* 分页器 */
        .layui-laypage {
            position: relative;
            left: -50px;
        }
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">商品数据管理系统</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                    <a class="User_name Homepage" href="javascript:;">
                        <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                        欢迎!
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a class="Homepage" href="javascript:;" title="个人主页">个人主页</a></dd>
                        <dd><a class="Cancel_account" href="javascript:;">注销账户</a></dd>
                        <dd><a class="Log_out" href="javascript:;" style="text-align: center;"><i class="layui-icon layui-icon-logout" style="font-size: 30px;" title="退出登录"></i></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed layui-this">
                        <a href="javascript:;">商品数据管理</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">Echarts数据图表</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <blockquote class="layui-elem-quote layui-text Header_content">

                </blockquote>
                <div class="layui-card layui-panel">
                    <div class="layui-card-header">

                        <div class="layui-col-md6">

                        </div>
                    </div>
                    <div class="layui-card-body">

                    </div>
                </div>
                <br><br>
            </div>
        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->

        </div>
    </div>
    <!-- 引⼊ layui.js -->
    <script src="//unpkg.com/layui@2.9.3/dist/layui.js"></script>
    <!-- CDN引⼊JQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <!-- 图表 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <script>
        // 异步加载
        window.onload = () => {
            User__name(JSON.parse(localStorage.getItem('User')).img)
            Hint(`欢迎用户：${JSON.parse(localStorage.getItem('User')).name}!!!`)
            $('.Homepage').on('click', User_Info)
            $('.Log_out').on('click', Log_out)
            $('.Cancel_account').on('click', Cancel_account)
            $('.layui-nav-tree').on('click', tab)
            // 商品列表
            table()
            tbody({ page: '1', limit: '5' })
            $('tbody').on('click', tbodys)
            $('.search_goods').on('click', search_goods)
            $('.div_sort').on('click', Goods_sort)
            $('.div_sort1').on('click', cancel_sort)
            $('.ipt_Clear').on('click', ipt_Clear)
        }
        // 添加提示符
        function Hint(add) {
            $('body').append(`<div class='Tips'></div>`)
            $('.Tips').fadeTo(500, 1)
            $('.Tips').text(add)
            setTimeout(() => {
                $('.Tips').fadeTo(1000, 0)
            }, 2000)
            setTimeout(() => {
                $('.Tips').detach()
            }, 3000)
        }
        // 渲染用户名
        function User__name(img = '//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png') {
            $('.User_name').html('')
            $('.User_name').append(`<img src="${/^(https?:\/\/)?(?<domain>[\da-z.-]+)\.(?<tld>[a-z.]{2,6})(?<path>[\/\w.-]*)(?<query>\?[^#]*)?(?<hash>#.*)?$/.test(img) ? img : '//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png'}" class="layui-nav-img">${JSON.parse(localStorage.getItem('User')).name}`)
        }
        // 个人主页
        function User_Info() {
            location.assign('./商品管理用户信息.html')
        }
        // 退出登录
        function Log_out() {
            location.assign('./商品管理登录页面.html')
        }
        // 注销账号
        function Cancel_account() {
            localStorage.clear()
            location.assign('./商品管理注册页面.html')
        }
        // tab切换
        function tab() {
            if (event.target.innerHTML == '商品数据管理') {
                // clearInterval(time)
                table()
                tbody({ page: '1', limit: '5' })
                $('tbody').on('click', tbodys)
                $('.search_goods').on('click', search_goods)
                $('.div_sort').on('click', Goods_sort)
                $('.div_sort1').on('click', cancel_sort)
                $('.ipt_Clear').on('click', ipt_Clear)
            }
            if (event.target.innerHTML == 'Echarts数据图表') {
                Bar_chart()
            }
        }
        // 
        // 商品数据管理
        // 
        // 渲染表格框架
        function table() {
            // 添加弹出框
            $('.Header_content').html('')
            $('.Header_content').append(`
                <button type="button" class="layui-btn layui-btn-primary" lay-on="test-page" style=''>
                    <i class="layui-icon layui-icon-add-1" style="font-size: 30px; color: #16baaa;"></i>
                </button>`)
            layui.use(function () {
                var $ = layui.$;
                var layer = layui.layer;
                var util = layui.util;
                var form = layui.form;
                // 事件
                util.on('lay-on', {
                    'test-page': function () {
                        layer.open({
                            type: 1,
                            area: ['420px', '300px'], // 宽高
                            title: '添加商品',
                            shadeClose: true,
                            content: `
                            <div style="padding: 16px;">
                                <form action="#" class='form_add' style='text-align:center;'>
                                    <span>商品名称:</span><input type="text" placeholder="必填"><br>
                                    <span>商品价格:</span><input type="number" placeholder="必填"><br>
                                    <span>商品库存:</span><input type="number" placeholder="必填"><br>
                                    <span>商品已售:</span><input type="number" placeholder="必填"><br>
                                    <span>是否上架:</span><select style='width:177.6px;' value><option value='1'>上架</option><option value='2'>下架</option></select><br>
                                    <span>商品图片:</span><input type="url" placeholder="输入商品图片地址"><br><br>
                                    <button type="button" class="layui-btn div_add">
                                      <i class="layui-icon layui-icon-edit"></i>
                                    </button>
                                </form>   
                            </div>
                            `
                        });
                        $('.div_add').on('click', div_add)
                    }
                })
            });
            // 排序
            $('.layui-card-header').html('')
            $('.layui-card-header').append(`
                <button type="button" class="layui-btn div_sort">商品排序</button>
                <button type="button" class="layui-btn div_sort1">取消排序</button>
            `)

            // 渲染表格内容
            $('.layui-card-body').html('')
            $('.layui-card-body').append(`
                <form class="layui-form layui-row layui-col-space16">
                <div class="layui-col-md4">
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-cart"></i>
                    </div>
                    <input type="text" name="A" value="" placeholder="商品名称搜索" class="layui-input" lay-affix="clear">
                  </div>
                </div>
                <div class="layui-btn-container layui-col-xs12">
                  <button class="layui-btn search_goods" lay-submit lay-filter="demo-table-search">搜索</button>
                  <button type="reset" class="layui-btn layui-btn-primary ipt_Clear">清空</button>
                </div>
                </form>
                <table width='100%'>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>商品图片</th>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>商品库存</th>
                            <th>商品状态</th>
                            <th>商品已售</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            `)
            layui.use(function () {
                var form = layui.form;
                // 搜索提交
                form.on('submit(demo-table-search)', function (data) {
                    return false; // 阻止默认 form 跳转
                });
            });
            pagers()
        }
        // 函数封装 Promise 网络请求
        function ajax(type, url, data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    type: type,
                    url: url,
                    data: data,
                    dataType: 'json',
                    success: (a) => {
                        resolve(a)
                    },
                    error: (e) => {
                        reject(e)
                    }
                })
            })
        }
        // 封装渲染表格内容
        function tbody(data) {
            ajax('GET', 'https://liu.zzgoodqc.cn/goodsx/listByPage', data).then((res) => {
                $('.layui-card-body tbody').html('')
                $.each(res.data, (index, item) => {
                    $('.layui-card-body tbody').append(`
                        <tr>
                            <th>${item.id}</th>
                            <th><img src="${item.img}" alt="？" title="${item.goods_name}" width="50px" height="50px" style="border-radius: 5px;"></th>
                            <th>${item.goods_name}</th>
                            <th>${item.price}</th>
                            <th>${item.stock}</th>
                            <th>${item.status === '1' ? '上架' : '下架'}</th>
                            <th>${item.sold}</th>
                            <th>${item.created_at}</th>
                            <th>${item.updated_at}</th>
                            <th>
                                 <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_modify" title='修改'>
                                  <i data-id='${item.id}' class="layui-icon layui-icon-edit btn_modify"></i>
                                </button>
                                <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_del"  title='删除'>
                                  <i data-id='${item.id}' class="layui-icon layui-icon-delete btn_del"></i>
                                </button>
                                <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_details" title='查看详情'>
                                  <i data-id='${item.id}' class="layui-icon layui-icon-form btn_details"></i>
                                </button>
                                <button data-id='${item.id}' data-is='${item.status}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_state" title='更新商品状态'>
                                  <i data-id='${item.id}' data-is='${item.status}' class="layui-icon layui-icon-set-sm btn_state"></i>
                                </button>
                            </th>
                        </tr>
                    `)
                })
                Pager_call(data.limit)
            }).catch((rej) => {
                console.log(rej)
                Hint('获取数据失败')
            })
        }
        // 添加商品
        function div_add() {
            let inp = [...$('.form_add input')]
            console.log($('.form_add input').eq(4).val())
            if (inp.every(item => item.value !== '')) {
                ajax('POST', 'https://liu.zzgoodqc.cn/goodsx/add', {
                    goods_name: $('.form_add input').eq(0).val(),
                    price: $('.form_add input').eq(1).val(),
                    stock: $('.form_add input').eq(2).val(),
                    sold: $('.form_add input').eq(3).val(),
                    status: $('.form_add select').val(),
                    img: $('.form_add input').eq(4).val(),
                }).then((res) => {
                    console.log(res)
                    tbody({ page: '1', limit: '5' })
                    layer.closeAll('page', Hint('添加成功'))
                }).catch((rej) => {
                    console.log(rej)
                    layer.closeAll('page', Hint('添加数据失败'))
                })
            } else {
                Hint('请输入完整数据')
            }
        }
        // 事件委托tbody、删除、修改、查看详情、更新商品状态
        function tbodys() {
            // 删除
            if (event.target.closest('.btn_del')) {
                const id = event.target.closest('.btn_del').dataset.id
                // 发起删除请求
                ajax('GET', `https://liu.zzgoodqc.cn/goodsx/delete`, { id: id }).then((res) => {
                    console.log(res)
                    Hint('删除成功')
                    tbody({ page: '1', limit: '5' })
                }).catch((rej) => {
                    console.log(rej)
                    Hint('删除失败')
                })
            }
            // 修改
            if (event.target.closest('.btn_modify')) {
                const id = event.target.closest('.btn_modify').dataset.id
                // 发起修改请求
                ajax('GET', 'https://liu.zzgoodqc.cn/goodsx/detail', { id: id }).then((res) => {
                    console.log(res.data)
                    Hint('获取成功')
                    // 在此处输入 layer 的任意代码
                    layer.open({
                        type: 1, // page 层类型
                        area: ['500px', '300px'],
                        title: '修改商品信息',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        maxmin: false, // 允许全屏最小化
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        content: `
                        <div style="padding: 32px;">
                            <form action="#" class='form_modify' style='text-align:center;'>
                                <span>&emsp;&emsp;&emsp;ID:</span><input type="text" placeholder="ID" readonly value='${res.data.id}'><br>
                                <span>商品名称:</span><input type="text" placeholder="必填" value='${res.data.goods_name}'><br>
                                <span>商品价格:</span><input type="number" placeholder="必填" value='${res.data.price}'><br>
                                <span>商品库存:</span><input type="number" placeholder="必填" value='${res.data.stock}'><br>
                                <span>商品已售:</span><input type="number" placeholder="必填" value='${res.data.sold}'><br>
                                <span>是否上架:</span><select style='width:177.6px;' value="${res.data.status}"><option value='1'>上架</option><option value='2'>下架</option></select><br>
                                <span>商品图片:</span><input type="url" placeholder="输入商品图片地址" value='${res.data.img}'><br><br>
                                <button type="button" class="layui-btn div_modify">
                                  <i class="layui-icon layui-icon-edit"></i>
                                </button>
                            </form> 
                        </div>
                        `
                    })
                    $('.div_modify').on('click', div_modify)
                }).catch((rej) => {
                    console.log(rej)
                    Hint('获取失败')
                })
            }
            // 查看详情
            if (event.target.closest('.btn_details')) {
                const id = event.target.closest('.btn_details').dataset.id
                // 发起修改请求
                ajax('GET', 'https://liu.zzgoodqc.cn/goodsx/detail', { id: id }).then((res) => {
                    console.log(res.data)
                    Hint('获取成功')
                    // 在此处输入 layer 的任意代码
                    layer.open({
                        type: 1, // page 层类型
                        area: ['500px', '500px'],
                        title: '商品信息',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        maxmin: false, // 允许全屏最小化
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        content: `
                        <div style="padding: 32px;text-align:center;">
                            <ul>
                                <li><img src="${res.data.img}" alt="？" title="${res.data.goods_name}" width="200px" height="200px" style="border-radius: 10px;"></li>
                                <li>商品编号：${res.data.id}</li>
                                <li>商品名称：${res.data.goods_name}</li>
                                <li>商品价格：${res.data.price}</li>
                                <li>商品库存：${res.data.stock}</li>
                                <li>商品已售：${res.data.sold}</li>
                                <li>商品状态：${res.data.status === '1' ? '上架' : '下架'}</li>
                                <li>创建日期：${res.data.created_at}</li>
                                <li>更新日期：${res.data.updated_at}</li>
                            </ul>
                        </div>
                        `
                    })
                }).catch((rej) => {
                    console.log(rej)
                    Hint('获取失败')
                })
            }
            // 更新商品状态
            if (event.target.closest('.btn_state')) {
                const id = event.target.closest('.btn_state').dataset.id
                const is = event.target.dataset.is == '1' ? '2' : '1'
                ajax('GET', 'https://liu.zzgoodqc.cn/goodsx/updateStatus', { id: id, status: is }).then((res) => {
                    tbody({ page: '1', limit: '5' })
                    layer.closeAll('page', Hint('更新商品状态成功'))
                }).catch((rej) => {
                    console.log(rej)
                    Hint('更新商品状态失败')
                })
            }
        }
        // 修改商品信息
        function div_modify() {
            if ([...$('.form_modify input')].every(item => item.value !== '')) {
                ajax('POST', 'https://liu.zzgoodqc.cn/goodsx/update', {
                    id: $('.form_modify input').eq(0).val(),
                    goods_name: $('.form_modify input').eq(1).val(),
                    stock: $('.form_modify input').eq(3).val(),
                    price: $('.form_modify input').eq(2).val(),
                    status: $('.form_modify select').val(),
                    sold: $('.form_modify input').eq(4).val(),
                    img: $('.form_modify input').eq(5).val(),
                }).then((res) => {
                    console.log(res)
                    tbody({ page: $('.layui-laypage-em').siblings().text(), limit: '5' })
                    layer.closeAll('page', Hint('修改成功'))
                }).catch((rej) => {
                    console.log(rej)
                    layer.closeAll('page', Hint('修改失败'))
                })
            } else {
                Hint('内容不完整')
            }
        }
        // 搜索商品
        function search_goods() {
            if ($('.layui-input').val() !== '') {
                ajax('POST', 'https://liu.zzgoodqc.cn/goodsx/search', { goods_name: $('.layui-input').val() }).then((res) => {
                    console.log(res.data)
                    if (res.data.length !== 0) {
                        $('.layui-card-body tbody').html('')
                        $.each(res.data, (index, item) => {
                            $('.layui-card-body tbody').append(`
                                <tr>
                                    <th>${item.id}</th>
                                    <th><img src="${item.img}" alt="？" title="${item.goods_name}" width="50px" height="50px" style="border-radius: 5px;"></th>
                                    <th>${item.goods_name}</th>
                                    <th>${item.price}</th>
                                    <th>${item.stock}</th>
                                    <th>${item.status === '1' ? '上架' : '下架'}</th>
                                    <th>${item.sold}</th>
                                    <th>${item.created_at}</th>
                                    <th>${item.updated_at}</th>
                                    <th>
                                         <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_modify">
                                          <i data-id='${item.id}' class="layui-icon layui-icon-edit btn_modify"></i>
                                        </button>
                                        <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_del">
                                          <i data-id='${item.id}' class="layui-icon layui-icon-delete btn_del"></i>
                                        </button>
                                        <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_details">
                                          <i data-id='${item.id}' class="layui-icon layui-icon-share btn_details"></i>
                                        </button>
                                        <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_state">
                                          <i data-id='${item.id}' class="layui-icon layui-icon-set-sm btn_state"></i>
                                        </button>
                                    </th>
                                </tr>
                            `)
                        })
                        $('.layui-footer').fadeOut(500)
                        Hint('查找成功')
                    } else {
                        Hint('查找不到该商品')
                    }
                }).catch((rej) => {
                    console.log(rej)
                })
            } else if ($('.layui-input').val() === '') {
                Hint('搜索内容不能为空')
                tbody({ page: '1', limit: '5' })
                $('.layui-footer').fadeIn(500)
            }
        }
        // 商品排序渲染
        function Goods_sort() {
            // 在此处输入 layer 的任意代码
            layer.open({
                type: 1, // page 层类型
                area: ['500px', '300px'],
                title: '商品排序',
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                maxmin: false, // 允许全屏最小化
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: `
                    <div style="padding: 32px;text-align:center;">
                        <select class='sele_sort' style="border:1px #16baaa solid;width:200px;font-size:20px;color:gray;border-radius: 15px;padding:5px 10px;">
                            <option value="asc">升序</option>
                            <option value="desc">降序</option>
                        </select><br><br>
                        <select class='sele_sort1' style="border:1px #16baaa solid;width:200px;font-size:20px;color:gray;border-radius: 15px;padding:5px 10px;">
                            <option value="price">价格</option>
                            <option value="stock">库存</option>
                            <option value="sold">已售</option>
                        </select><br><br>
                        <button type="button" class="layui-btn btn_sort">
                          <i class="layui-icon layui-icon-cols"></i>
                        </button>
                    </div>
                    `
            })
            $('.btn_sort').on('click', btn_sort)
        }
        // 商品排序
        function btn_sort() {
            ajax('GET', 'https://liu.zzgoodqc.cn/goodsx/sort', { sort: $('.sele_sort').val(), type: $('.sele_sort1').val(), page: '1', limit: '500' }).then((res) => {
                $('.layui-footer').fadeOut(500)
                $('.layui-card-body tbody').html('')
                $.each(res.data, (index, item) => {
                    $('.layui-card-body tbody').append(`
                            <tr>
                                <th>${item.id}</th>
                                <th><img src="${item.img}" alt="？" title="${item.goods_name}" width="50px" height="50px" style="border-radius: 5px;"></th>
                                <th>${item.goods_name}</th>
                                <th>${item.price}</th>
                                <th>${item.stock}</th>
                                <th>${item.status === '1' ? '上架' : '下架'}</th>
                                <th>${item.sold}</th>
                                <th>${item.created_at}</th>
                                <th>${item.updated_at}</th>
                                <th>
                                     <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_modify">
                                      <i data-id='${item.id}' class="layui-icon layui-icon-edit btn_modify"></i>
                                    </button>
                                    <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_del">
                                      <i data-id='${item.id}' class="layui-icon layui-icon-delete btn_del"></i>
                                    </button>
                                    <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_details">
                                      <i data-id='${item.id}' class="layui-icon layui-icon-share btn_details"></i>
                                    </button>
                                    <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_state">
                                      <i data-id='${item.id}' class="layui-icon layui-icon-set-sm btn_state"></i>
                                    </button>
                                </th>
                            </tr>
                        `)
                })
                layer.closeAll('page', Hint('排序成功'))
            }).catch((rej) => {
                console.log(rej)
                layer.closeAll('page', Hint('排序失败'))
            })
        }
        // 渲染分页器
        function pagers() {
            $('.layui-footer').html('')
            $('.layui-footer').append(`<div style='text-align: center;' id="demo-laypage-pn-hide"></div>`)
            Pager_call()
        }
        // 分页器调用
        function Pager_call(num = 5) {
            ajax('GET', 'https://liu.zzgoodqc.cn/goodsx/goodslist').then((res) => {
                // console.log(res.data)
                layui.use(function () {
                    var laypage = layui.laypage;
                    // 不显示上一页、下一页
                    laypage.render({
                        elem: 'demo-laypage-pn-hide',
                        count: res.data.length,
                        limit: num,
                        prev: false,
                        next: false,
                        // curr: location.hash.replace('#!curr=', ''), // 初始获取 hash 值为 curr 的当前页
                        // hash: 'curr' // 自定义 hash 名称
                    })
                })
                $('#demo-laypage-pn-hide').click(function () {
                    if (/^[+-]?\d+$/.test(event.target.innerHTML)) {
                        ajax('GET', 'https://liu.zzgoodqc.cn/goodsx/listByPage', { page: $('.layui-laypage-em').siblings().text(), limit: num }).then((res) => {
                            $('.layui-card-body tbody').html('')
                            $.each(res.data, (index, item) => {
                                $('.layui-card-body tbody').append(`
                                    <tr>
                                        <th>${item.id}</th>
                                        <th><img src="${item.img}" alt="？" title="${item.goods_name}" width="50px" height="50px" style="border-radius: 5px;"></th>
                                        <th>${item.goods_name}</th>
                                        <th>${item.price}</th>
                                        <th>${item.stock}</th>
                                        <th>${item.status === '1' ? '上架' : '下架'}</th>
                                        <th>${item.sold}</th>
                                        <th>${item.created_at}</th>
                                        <th>${item.updated_at}</th>
                                        <th>
                                             <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_modify">
                                              <i data-id='${item.id}' class="layui-icon layui-icon-edit btn_modify"></i>
                                            </button>
                                            <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_del">
                                              <i data-id='${item.id}' class="layui-icon layui-icon-delete btn_del"></i>
                                            </button>
                                            <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_details">
                                              <i data-id='${item.id}' class="layui-icon layui-icon-share btn_details"></i>
                                            </button>
                                            <button data-id='${item.id}' type="button" class="layui-btn layui-btn-sm layui-btn-primary btn_state">
                                              <i data-id='${item.id}' class="layui-icon layui-icon-set-sm btn_state"></i>
                                            </button>
                                        </th>
                                    </tr>
                                `)
                                // Hint(`第${$('.layui-laypage-em').siblings().text()}页`)
                            })
                        }).catch((rej) => {
                            console.log(rej)
                            Hint('获取数据失败')
                        })
                    }
                })
            }).catch((rej) => {
                console.log(rej)
            })
        }
        // 取消排序
        function cancel_sort() {
            tbody({ page: '1', limit: '5' })
            $('.layui-footer').fadeIn(500)
        }
        // 清空搜索框
        function ipt_Clear() {
            tbody({ page: '1', limit: '5' })
            $('.layui-footer').fadeIn(500)
        }
        // 
        // Echarts数据图表
        // 
        // 渲染图表框架
        function Bar_chart() {
            $('.Header_content').html('')
            $('.Header_content').append(`商品管理系统图表`)
            $('.layui-card-header').html('')
            $('.layui-card-body').html('')
            $('.layui-card-body').append(`
                <div id="main" style="width: 100%;height:400px;"></div>
                <div style='display:flex;flex-wrap: wrap;'>
                    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main1" style="width: 620px;height:400px;"></div>
                    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main2" style="width: 620px;height:400px;"></div>
                </div>
            `)
            $('.layui-footer').html('')
            Chart_Data()
        }
        // 渲染图表数据
        function Chart_Data() {
            ajax('GET', 'https://liu.zzgoodqc.cn/goodsx/goodslist').then((res) => {
                // console.log(res.data)
                let name = []
                let sold = []
                let stock = []
                let price = []
                let status = []
                let obj = []
                res.data.forEach(item => {
                    name.push(item.goods_name)
                    sold.push(item.sold)
                    stock.push(item.stock)
                    price.push(item.price)
                    status.push(item.status == 1 ? '上架' : '下架')
                    obj.push({ value: item.price, name: item.goods_name })
                })
                // 折线图
                var Line_chart = echarts.init(document.getElementById('main'))
                const dataX = name
                const y = stock
                const y1 = sold
                option = {
                    title: {
                        text: '商品售出情况',
                        left: "left",
                        top: "1%",
                        textStyle: {
                            color: '#111111', // 标题颜色
                            fontWeight: 'bold',
                            fontSize: 16,
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(33,56,77,1)',
                        borderColor: 'rgba(33,56,77,1)',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        },
                        axisPointer: {
                            lineStyle: {
                                color: 'rgba(19,255,241,1)',
                                type: 'dashed',
                                width: 2
                            }
                        }
                    },
                    legend: {
                        right: 'center',
                        top: '5%',
                        itemWidth: 16,
                        itemHeight: 16,
                        itemGap: 25,
                        icon: 'stack',
                        textStyle: {
                            color: '#E1E5E6'
                        }
                    },
                    grid: {
                        top: '16%',
                        right: '4%',
                        bottom: '4%',
                        left: '6%',
                        containLabel: true
                    },
                    xAxis: {
                        data: dataX,
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            textStyle: {
                                color: '#B5C5D4',
                                fontSize: 12
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true // 去除刻度线
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: { show: false },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#B5C5D4',
                                fontSize: 12
                            }
                        },
                        // y轴分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: '#9EA6B4',
                                type: 'solid'
                            }
                        }
                    },
                    series: [
                        {
                            name: '库存',
                            smooth: true,
                            type: 'line',
                            // 填充颜色设置
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(253, 190, 93,.4)' // 渐变色的起始颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: 'rgba(253, 190, 93,0)' // 渐变线的结束颜色
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            },
                            // 开始不显示拐点， 鼠标经过显示
                            showSymbol: true,
                            symbolSize: 8,
                            // 设置拐点颜色以及边框
                            itemStyle: {
                                color: 'rgba(253, 190, 93, 1)'
                            },
                            data: y1
                        },
                        {
                            name: '售出',
                            smooth: true,
                            type: 'line',
                            // 填充颜色设置
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(26, 119, 221,.4)' // 渐变色的起始颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: 'rgba(26, 119, 221,0)' // 渐变线的结束颜色
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            },
                            // 开始不显示拐点， 鼠标经过显示
                            showSymbol: true,
                            symbolSize: 4,
                            // 设置拐点颜色以及边框
                            itemStyle: {
                                color: 'rgba(26, 119, 221, 1)'
                            },
                            data: y
                        }
                    ]
                }
                Line_chart.setOption(option)
                // 柱状图
                var Bar_chart = echarts.init(document.getElementById('main1'))
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: name,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '价格',
                            type: 'bar',
                            barWidth: '20%',
                            data: price
                        },
                        {
                            name: '库存',
                            type: 'bar',
                            barWidth: '20%',
                            data: stock
                        },
                        {
                            name: '售出',
                            type: 'bar',
                            barWidth: '20%',
                            data: sold
                        },
                        {
                            name: '状态',
                            type: 'bar',
                            barWidth: '20%',
                            data: status
                        }
                    ]
                };
                Bar_chart.setOption(option)
                // 饼状图
                var Bar_chart = echarts.init(document.getElementById('main2'))
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '商品价格',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: obj
                        }
                    ]
                };
                Bar_chart.setOption(option)
            }).catch((rej) => {
                console.log(rej)
            })
        }
        // 
    </script>
</body>

</html>